@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

*, *::after, *::before {
	@include box-sizing(border-box);
}

html {
	font-size: 62.5%;
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-3;
	background-color: darken($color-1, 10%);

	&::before {
		/* never visible - this is used in jQuery to check the current MQ */ 
		content: 'mobile';
		display: none;
	}

	@include MQ(L) {
		&::before {
			/* never visible - this is used in jQuery to check the current MQ */ 
			content: 'desktop';
		}
	}
}

a {
	color: $color-2;
	text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */

@include MQ(L) {
	.cd-section {
		height: 100vh;
	}
}

.cd-section h1 {
	position: relative;
	top: 50%;
	@include transform(translateY(-50%));
	@include font-smoothing;
	text-align: center;
	font-size: 2.6rem;

	@include MQ(M) {
		font-size: 3.2rem;
	}

	@include MQ(L) {
		font-size: 4.2rem;
	}
}

.cd-block, .cd-half-block {
	@include transform(translateZ(0));
	@include backface-visibility(hidden);
}

.cd-block {
	@include transform-origin(center center);
	
	.cd-section:first-of-type & {
		height: 100vh;
		background-color: $color-1;
	}

	@include MQ(L) {
		position: fixed;
		width: 100%;
		min-height: 100vh;
		top: 0;
		left: 0;
		height: 100vh;
		box-shadow: 0 0 40px rgba(#000, .7);

		visibility: hidden;

		.cd-section:first-of-type & {
			visibility: visible;
		}

		> * {
			visibility: visible;
		}
	} 
}

.cd-half-block {
	background: $color-3;
	color: $color-1;

	&:nth-of-type(1) {
		height: 60vh;
		background-color: $color-1;
		background-position: center center;
		background-repeat: no-repeat;
	}

	&:nth-of-type(2) {
		padding: 4em 10%;
	}

	p {
		font-size: 1.8rem;
		line-height: 1.8;
	}

	.cd-section:nth-of-type(2) &:first-of-type {
		background-image: url('https://gitee.com/AmosWang/3d-curtain/raw/master/img/img-1.jpg');
		background-size: cover;
	}

	.cd-section:nth-of-type(3) &:first-of-type {
		background-image: url('https://gitee.com/AmosWang/3d-curtain/raw/master/img/img-2.jpg');
		background-size: cover;
	}

	.cd-section:nth-of-type(4) &:first-of-type {
		background-image: url('https://gitee.com/AmosWang/3d-curtain/raw/master/img/img-3.jpg');
		background-size: cover;
	}

	@include MQ(L) {
		height: 100vh !important;
		width: 50%;
		position: absolute;
		top: 0;

		p {
			position: absolute;
			@include center;
			width: 100%;
			padding: 0 30%;
			font-size: 2.4rem;
		}

		.cd-section:nth-of-type(even) &:first-of-type,
		.cd-section:nth-of-type(odd) &:nth-of-type(2) {
			left: 0;
			@include transform(translateX(-100%));
		}

		.cd-section:nth-of-type(odd) &:first-of-type, 
		.cd-section:nth-of-type(even) &:nth-of-type(2) {
			right: 0;
			@include transform(translateX(100%));
		}
	}
}

.cd-vertical-nav {
	position: fixed;
	z-index: 1;
	right: 3%;
	@include center(y);
	display: none;

	a {
		display: block;
		height: 40px;
		width: 40px;

		/* image replace */
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;

		background: transparent url(../img/cd-icon-arrow.svg) no-repeat center center;
		@include transition(opacity 0.2s 0s, visibility 0.2s 0s);

		&.cd-prev {
			@include transform(rotate(180deg));
			margin-bottom: 10px;
		}

		&.inactive {
			visibility: hidden;
			opacity: 0;
			@include transition(opacity 0.2s 0s, visibility 0s 0.2s);
		}
	}

	@include MQ(L) {
		display: block;
	}
}